<template>
  <div class="flex flex-col flex-1">
    <div class="flex items-center h-66 tabBackground textColor">
      <p class="font-28 flex-1 flex items-center justify-center h-66" :class="currentType == 'open' ? 'open' : ''"
        @click="changeTab('open')">{{ $t('买入') }}</p>
      <p class="font-28 flex-1 flex items-center justify-center h-66" :class="currentType == 'close' ? 'close' : ''"
        @click="changeTab('close')">{{ $t('卖出') }}</p>
    </div>

    <div class="mt-22 mb-22" style="position:relative;">
      <div class="inputBackground flex justify-between items-center w-full h-70" @click="selectBtn">
        <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
        <div class="pl-16 textColor" style="width:80%;">{{ title }}</div>
        <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
      </div>
      <div class="option-box" v-show="isShow">
        <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}
        </div>
      </div>
    </div>
    <div class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor">
      <input placeholder="" class="targetPrice inputBackground w-full  h-70 border-none" v-model="form.price"
        :disabled="type / 1 === 1" />
      <span>USDT</span>
    </div>
    <div class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
      <input :placeholder="$t('数量')" class="inputBackground w-full h-70 border-none textColor" v-model="form.volume"
        @input="onInput" />
      <span class="textColor">{{ currentType == 'open' ? 'USDT' : symbol.toLocaleUpperCase() }}</span>
    </div>
    <vue-slider v-bind="options" v-model="form.volume" :interval="interval"></vue-slider>
    <div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center">
      <span class="flex-1 text-left">0%</span>
      <span class="flex-1 text-left">25%</span>
      <span class="flex-1 text-center">50%</span>
      <span class="flex-1 text-right">75%</span>
      <span class="flex-1 text-right">100%</span>
    </div>
    <div class="flex justify-between items-center mt-40">
      <div class="flex flex-col font-24">
        <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
            {{ initOpen.volume | nan }}&nbsp;USDT</span>
        </p>
        <p class="text-grey" v-else>{{ $t('可卖') }}<span class="textColor ml-8">{{ initClose.volume | nan }}&nbsp;{{
          symbol.toLocaleUpperCase() }}</span></p>
      </div>
      <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" />
    </div>
    <div class="w-full h-90 lh-90 flex justify-center text-white text-center rounded mt-40"
      :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
      {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
    </div>

  </div>
</template>

<script>
import config from "@/config";
import { Popup, Tabs, Tab } from 'vant';
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
import { _getBalance } from '@/API/trade.api'
import TradeApi from "@/API/trading.js";
import { mapGetters } from "vuex";
// import PopupConfirmOrder from '@/components/popup-confirm-order'
export default {
  name: "perpetualPosition",
  components: {
    VueSlider,
    [Popup.name]: Popup,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab
  },
  props: {
    symbol: {
      type: String,
      default: ''
    },
    price: {
      type: [Number, String],
      default: '0.00'
    },
    initOpen: {
      type: Object,
      default() {
        return {}
      }
    },
    initClose: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  computed: {
    ...mapGetters('user', ['userInfo']),
  },
  watch: {
    initOpen: { // 处理滚动条初始值
      deep: true,
      handler(val) {
        console.log(val)
        if (val.volume / 1 > 0) {
          this.handleInitSliderOption()
        }
      }
    },
    initClose: { // 处理滚动条初始值
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.volume / 1 > 0) {
          this.handleInitSliderOption(true)
        }
      }
    },
    price(val) {
      if (this.type === '1') { // !this.focus &&
        this.form.price = val
      }
    },
  },
  mounted() {
    this.selectData = [
      { title: this.$t('市价委托'), type: '1' },
      { title: this.$t('限价委托'), type: '2' },
    ]
  },
  activated() {
    this.selectData = [
      { title: this.$t('市价委托'), type: '1' },
      { title: this.$t('限价委托'), type: '2' },
    ]
    this.title = this.selectData[0].title;
    this.type = this.selectData[0].type;
    this.form.order_price_type = 'opponent'
  },
  filters: {
    nan(val) {
      return isNaN(val) ? '--' : val
    }
  },
  data() {
    return {
      options: config.sliderOptions,
      value: 0,
      isShow: false,
      title: this.$t('市价委托'),
      selectData: [
        { title: this.$t('市价委托'), type: '1' },
        { title: this.$t('限价委托'), type: '2' },
      ],
      form: {
        volume: '',
        session_token: '',
        symbol: '', // 币种
        price: '',
        order_price_type: 'opponent', // 市价or限价
      },
      type: "1",//选中市价或限价类型
      currentType: "open", //开仓类型
      interval: 0.0001
    }
  },
  methods: {
    handleInitSliderOption(volume) {
      if (!volume) { // 金额是否需要变动
        this.form.volume = ''
      }
      console.log(this.initOpen.volume)
      let vol
      if (this.currentType === 'open') {
        vol = this.initOpen.volume / 1
      } else {
        vol = this.initClose.volume / 1
      }
      let str = this.interval.toString().split('.')[1]
      let numLength = str.length
      this.options.max = Math.floor(vol * 10000) / 10000
      if (this.options.max > 0) {
        this.options.disabled = false
      } else {
        this.options.disabled = true
      }
    },
    onInput() { // 数量变化
      if (this.form.volume * 1 / 1 > this.options.max / 1) {
        this.form.volume = this.options.max / 1
      }
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    //选择价格类型
    selectItem(item) {
      this.form.order_price_type = item.type === '1' ? 'opponent' : 'limit'
      this.title = item.title;
      this.type = item.type;
      this.isShow = false;
    },
    //选择开仓类型
    changeTab(type) { // 开仓和
      console.log('changeTab', type)
      // TODO: 这里应该是换函数
      // this.form.direction = type === 'open' ? 'buy' : 'sell'
      if (this.currentType === type) {
        return
      }
      this.currentType = type;
      if (this.currentType === 'close') {
        this.$emit('ordered', 'close') // 更新平仓初始化参数
      } else {
        this.$emit('ordered', 'open') // 更新平仓初始化参数
      }
      this.handleInitSliderOption()
    },
    order() {
      if (!this.userInfo.token) {
        this.$router.push('/login')
        return
      }
      if (!this.form.volume) {
        this.$toast.fail(this.$t('请输入数量'))
        return
      }
      this.form.symbol = this.$route.params.symbol
      let _order = null // api
      let emitFunc = null // 触发函数

      if (this.currentType === 'open') {
        this.form.session_token = this.initOpen.session_token
      } else {
        this.form.session_token = this.initClose.session_token
      }
      _order = this.currentType === 'open' ? TradeApi.tradeBuy : TradeApi.tradeSell
      emitFunc = this.currentType
      _order(this.form).then((res) => {
        this.$toast(this.$t('操作成功'))
        _getBalance().then(data => { // 刷新余额
          this.$store.commit('user/SET_USERINFO', { balance: data.money })
        })
        this.$emit('ordered', emitFunc)
      }).catch(() => { // 也需要重新初始化
        this.$emit('ordered', emitFunc)
      })
    },
  }
}
</script>

<style lang="scss">
.bg-f3 {
  background: #f3f3f3;
}

.options {
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  border-radius: 6px;

  div {
    font-size: 22px;
    text-align: center;
    width: 140px;
    height: 60px;
    line-height: 60px;

    &.option-active {
      background-color: #F5F5F5;
    }
  }
}

.right-word {
  top: 50%;
  transform: translateY(-50%);
  right: 19px;
  position: absolute;
  border-radius: 6px;
}

.vue-slider {
  height: 3px !important;
  padding: 0 10px !important;
}

.vue-slider-dot {
  width: 28px !important;
  height: 28px !important;

}

.vue-slider-mark-label {
  font-size: 16px;
  margin-top: 14px !important;
}

.vue-slider-mark-label-active {
  color: #868D9A !important;
}

.vue-slider-dot-handle {
  border: 3px solid #2C78F8;
}

.vue-slider-mark {
  width: 20px !important;
  height: 20px !important;

  &:nth-child(1) {
    .vue-slider-mark-label {
      transform: translateX(-14px) !important;
    }
  }

  &:nth-child(5) {
    .vue-slider-mark-label {
      transform: translateX(-60px) !important;
    }
  }
}

// 开仓样式
.tabcon {
  // padding-bottom: 16%;
  position: relative;
  height: 80px;
}

.tab {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  border-radius: 5px;
  overflow: hidden;
}

.tab>* {
  height: 100%;
}

.tab>img {
  margin-left: -2px;
  margin-right: -2px;
}

.tab>a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.open {
  background-color: #2EBD85;
  background: url(@/assets/image/public/open-bg.png) no-repeat right center;
  background-size: 100% 100%;
  color: white;
}

.close {
  background-color: #2EBD85;
  background: url(@/assets/image/public/close-bg.png) no-repeat left center;
  background-size: 100% 100%;
  color: white;
}

// 下拉
.option-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  width: 100%;
  background-color: $grey_bg;
  text-align: center;
  box-shadow: 0px 0px 3px 3px $grey_bg;
  border-radius: 4px;
  color: $text-color;
  z-index: 10;
}

.option-box>div {
  padding: 30px 0;
}

.option-box>div:hover {
  background-color: #F5F5F5;
}

.num-text-color {
  color: #4C4A54;
}

select {
  appearance: none;
  /* 去掉默认图标 */
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  padding: 0 20px 0 20px;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
  /* 自己的图*/
  background-size: 20px 11px;
}

.with100 {
  width: 100%;
}

.height100 {
  height: 100%;
}

.targetPrice {

  opacity: 1;
}
</style>
